<!--
 @description 装修实景-视频详情
 @fileName detailVideo.vue
 @author zengqiongying
 @created 2023/09/11 14:05:59
-->
<template>
  <div>
    <MineHeader arrow :show-statusbar="false" title="" bg-color="#000000" :font-black="false" />
    <div class="detail-box">
      <ImageVideo
        v-if="detail && detail.videoUrl"
        :host="ADS_STATIC_PATH"
        :src="detail.videoUrl"
        :poster="detail.realityPic"
        fit="contain"
        :is-image="false"
        autoplay
        hide-controls
      />
    </div>
    <div class="detail-title">
      <div style="text-align: right;">
        <div v-if="detail.videoUrl" class="btn-download" @click="downLoad({fileUrl:detail.videoUrl,fileName:detail.realityName})">下载视频</div>
      </div>
      <div>{{ detail.realityName }}</div>
    </div>
  </div>
</template>

<script>
import ImageVideo from '@/components/ImageVideo'
import DetailMixin from './DetailMixin'
export default {
  name: 'RealityVideoDetail',
  components: { ImageVideo },
  mixins: [DetailMixin],
  data() {
    return {

    }
  },

  computed: {},

  created() {},
  activated() {},

  mounted() {},

  methods: {}
}

</script>
<style lang='less' scoped>
.detail-box{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  box-sizing: border-box;
  background: #000;
  z-index: 1;
}
.btn-download{
  margin-bottom: 10px;
  display: inline-block;
  padding:5px;
  border-radius: 4px;
  background: #149774;
  color: #FFFFFF;
  line-height: 1;
}
.detail-title{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding:16px;
  box-sizing: border-box;
  z-index:999;
  font-size: 14px;
  font-weight: 400;
  background: rgba(0, 0, 0, .4);
  color: #FFFFFF;
  line-height: 1.5;
}
</style>
